<template>
  <div class="webchat-card" :class="{'webchat-all': tabType !== 'webchat_todo'}">
    <div class="limitCountNotice" v-show="tabType === 'webchat_todo' && webchatTodoCardAllList.length >= limitCount">{{$t('webchat.sessionLimitNotice')}}</div>
    <webchat-card-slot-filter class="el-menu-vertical-demo" :tabType="tabType">
      <div style="padding: 0;position: relative" v-for="(item, index) in cardListRender" :key="index" @click.stop="handleSelect(item)">
        <div class="card webchat_card"
             :id="'webchat_'+item._id"
             :class="{
              'all': tabType === 'webchat_all',
              'setTop': tabType === 'webchat_todo' && showSetTopStatus(item),
              'custom-is-active': $route.path.split('/')[4] === item._id, 'isOffline': item.userStatus === 'offline' && item.status !== 'finish'}">
          <label v-if="
                (tabType === 'webchat_todo' && !(item.invitedUser && item.invitedUser === sessionId))
                || (tabType === 'webchat_all' && shouFinshUndeal && searchStatus === 'undeal' && (item.status === 'finish' || item.status === 'undeal' || item.status === 'robot'))
                || (tabType === 'webchat_laterProcess')"
                 class="fake-checkbox"
                 :class="{'visible': batch[tabType].isBatchShow}" v-on:click.stop="">
            <input type="checkbox" class="fbox" :value="item._id" v-model.trim="item.checked" @change="checkThis(item.checked)">
            <span></span> 
            <i class="fake-label"></i>
          </label>
          <label v-else class="checkbox_label_alternative"></label>
          <div class="webchat_card_status">
            <i class="iconfont" :class="'icon-zhudonglingqu__' + $i18n.locale" v-show="item.activeClaimType === 'robot'"></i>
            <i class="iconfont" :class="'icon-zhuanjiehuihua__' + $i18n.locale" v-show="item.fromUser || item.from"></i>
            <i class="iconfont" :class="'icon-zhudongyaoqing1__' + $i18n.locale" v-show="item.showInvite"></i>
            <i class="iconfont" :class="[$i18n.locale !== 'en' ? 'icon-zhudonghuihua' : 'icon-zhudonghuihua']" :dataEn="$i18n.locale" v-show="item.initiating"></i>
          </div>
          <div class="info">
            <slot name="avatar" :item="item"></slot>
            <ul class="info_ul novice-boot-box-wrap">
              <li class="new_chat ellipsis font14">
                <div class="ellipsis">
                  <span class="onlineStatus" v-show="item.userStatus === 'online' && item.status !== 'finish' && flag !=='ecommerce'">{{$t('monitor.online')}}</span>
                  <span class="offlineStatus" v-show="item.userStatus === 'offline' && item.status !== 'finish' && flag !=='ecommerce'">{{$t('monitor.offline')}}</span>
                  <span class="custintent fr" v-if="item.custIntention || item.custIntention === 0" :class="{'rehiddenBlock': item.userStatus === 'offline' && leaveTime(item.sBreakTime) && item.status !== 'finish'}">{{item.custIntention + '%'}}</span>
                  <span class="ellipsis" :class="{'offlineShow': leaveTime(item.sBreakTime)}" v-if="item.userStatus === 'offline' && leaveTime(item.sBreakTime) && item.status !== 'finish'">{{$t('public.leaveTime')}} {{leaveTime(item.sBreakTime)}}</span>
                  <span class="info_li_sname ellipsis new-name" :class="{'rehiddenBlock': item.userStatus === 'offline' && leaveTime(item.sBreakTime) && item.status !== 'finish'}">
                    {{ item.leavemsg ? item.sName + '(' + $t('webchat.leaveMessage') + ')' : item.sName}}
                  </span>
                </div>
                <div>
                  <span class="font12 iconfont icon-shaohouchuli activeShaohouchuli" style="vertical-align: text-top;margin-right: 5px" v-show="item.laterProcess && tabType === 'webchat_todo'"></span>
                  <span v-if="tabType !== 'webchat_queue'" class="font12 date" :class="{'rehiddenBlock': !(item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept') && tabType === 'webchat_todo'}">{{chatTime(item)}}</span>
                  <webchatQueueTime v-else :manualTime="item.manualTime"></webchatQueueTime>
                </div>
                <div class="hoverIcon"  v-if="tabType === 'webchat_todo'">
                  <label class="topSession" v-if="tabType === 'webchat_todo' && !item.setTopStatus">
                    <el-tooltip class="item" effect="dark" :content="$t('webchat.setTopSession')" placement="bottom">
                      <i class="iconfont icon-zhiding" @click.stop="setSessionTop(item,true)"></i>
                    </el-tooltip>
                  </label>
                  <label class="cancelTopSession" v-if="tabType === 'webchat_todo' && showSetTopStatus(item)">
                    <el-tooltip class="item" effect="dark" :content="$t('webchat.cancelSetTopSession')" placement="bottom">
                      <i class="iconfont icon-ding" @click.stop="setSessionTop(item, false)"></i>
                    </el-tooltip>
                  </label>
                  <label class="close" style="" v-show="tabType === 'webchat_todo' && !(item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept')">
                    <el-tooltip class="item" effect="dark" :content="$t('webchat.endSession')" placement="bottom">
                      <i class="el-icon-close closeChat" @click.stop="getAutoFinishReason(item)" style="font-weight: 900"></i>
                    </el-tooltip>
                  </label>
                </div>
              </li>
              <li class="new_chat ellipsis card_chat_content" v-if="tabType === 'webchat_todo'" style="clear: both">
                <span class="Cover"></span>
                <span class="chat_content ellipsis" v-show="item.lastMessageUser !=='system '" v-html="lastMessageChange(item)"></span>
                <div class="wait">
                  <el-badge :value="item.leakNum" :max="99" class="queueNum" v-show="item.leakNum"></el-badge>
                  <webchat-timer :isCard="true" :startWaitTimer="item.startWaitTimer" :startWaitTimerStamp="item.startWaitTimerStamp"></webchat-timer>
                </div>
              </li>
              <li class="new_chat ellipsis agents_and_skill_group" v-if="tabType !== 'webchat_todo'" style="clear: both">
                <div class="ellipsis fl" v-if="tabType === 'webchat_all' || tabType === 'webchat_laterProcess'">
                  <span class="chat_info_name">{{agentName(item)}}</span>
                  <span v-show="toPeer(item)">({{toPeer(item)}})</span>
                </div>
                <div v-show="tabType !== 'webchat_robot' && tabType !== 'webchat_queue'">
                  <i class="videoIcon iconfont icon-shipin" style="margin-right: 5px" v-show="item.showVideoIcon"></i>
                  <span
                    v-show="(tabType !== 'webchat_robot' && tabType !== 'webchat_queue') && !showGrabBtn(item.toPeer, item.user, item.status, item.inviteUserStatus)"
                    class="chat_status"
                    :class="item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept' ? 'status_beinvited card_statu_li' : item.status === 'changePeer' ? 'status_change' : item.status === 'finish' ? 'status_finish' : item.status === 'robot' ? 'status_robot' : item.status === 'undeal' ? 'status_undeal' : item.fromUser ? 'status_invited_get card_statu_li' : 'status_deal card_statu_li'"
                    v-html="item.invitedUser && item.invitedUser === sessionId && item.inviteUserStatus === 'accept' ? $t('webchat.beInvited') : item.status === 'changePeer' ? $t('webchat.transfer') : item.fromUser && item.status === 'finish' ? $t('webchat.TransferClosed') : item.status === 'undeal' ? $t('webchat.undeal') : item.status === 'robot' ? $t('webchat.robot') : item.status === 'form' ? $t('webchat.formStatus') : item.status === 'finish' ? $t('webchat.closed') : $t('webchat.received')"
                  ></span>
                </div>
                <span class="chat_content ellipsis" v-show="item.lastMessageUser !=='system ' && (tabType === 'webchat_robot' || tabType === 'webchat_queue' )" v-html="lastMessageChange(item)"></span>
                <span class="chat_status_btn clearBoth" v-show="tabType === 'webchat_robot' && isShowRobotReceiveSession && item.status !== 'finish'">
                  <el-button size="mini" class="fr chat_btn robot_btn" @click.stop="claimRobotSession(item)">{{$t('business.received')}}</el-button>
                </span>
                <span class="chat_status_btn clearBoth" v-show="tabType === 'webchat_queue' && isShowQueueReceiveSession && item.status !== 'finish'">
                  <el-button size="mini" class="fr chat_btn robot_btn" @click.stop="claimQueueSession(item)">{{$t('business.received')}}</el-button>
                </span>
                <span class="chat_status_btn clearBoth" v-show="tabType === 'webchat_all' && showGrabBtn(item.toPeer, item.user, item.status, item.inviteUserStatus)">
                  <el-button size="mini" class="fr chat_btn robot_btn" @click.stop="grabConversation(item._id, item.sid, item.user)">{{$t('monitor.pickUp')}}</el-button>
                </span>
              </li>
              <li class="agent_wait_time" style="clear: both">
                <span :title="platformContent(item)" class="platformContent ellipsis">
                  <i :class="['im_' + item.platform]"></i>
                  {{platformContent(item)}}
                </span>
                <div class="cust_status_box">
                  <span class="iconfont" :class="'icon-youxianjinxian__' + $i18n.locale" v-show="item.priority"></span>
                  <span class="cust_status" :style="{color: currentColor(item.cust_status)}">{{statusName(item.cust_status)}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="remark">
            <ul>
              <li class="chat_status_li clearBoth">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </webchat-card-slot-filter>
    <no-record v-if="cardList && cardList.length<=0"></no-record>
    <!-- 批处理-->
    <div class="batch_cover" :class="{'navMenuState': navMenuState}" v-show="batch[tabType].isBatchShow"></div>
    <div class="batch_btm" v-show="batch[tabType].isBatchShow"></div>
    <div class="batch" :class="{'show': batch[tabType].isBatchShow, 'navMenuState': navMenuState}">
      <el-checkbox v-model.trim="batch[tabType].allChecked" @change="checkAll()">{{$t('public.checkAll')}}</el-checkbox>
      <card-batch v-if="batch[tabType].operator"
                  :tabType="tabType"
                  :batchOperator="batch[tabType]"
                  @checkNone="checkNone"
                  @getFinishReason="getFinishReason"
                  @handleLaterProcess="handleLaterProcess"
                  @handleCancelLaterProcess="handleCancelLaterProcess"
              >
        <template slot="batchTransferPopover" slot-scope="slotProps">
          <el-popover ref="batchTransferPopover" placement="top-start" width="220" trigger="manual"
                      v-model="batchWebchat.show">
            <webchatTransfer :AssignTreeData="batchWebchat.AssignTreeData"
                             :popoLoading="batchWebchat.popoLoading"
                             :openPop="batchWebchat.openPop"
                             :onlineAgentsInvite="batchWebchat.onlineAgentsInvite"
                             @searchTree="searchTree"
                             @togglePop="togglePop"
                             @transfer="batchTransferSend">
            </webchatTransfer>
            <span class="option" slot="reference" @click="batchTransfer">
              <i :class="slotProps.item.class"></i>{{$t(slotProps.item.name)}}
            </span>
          </el-popover>
          <div class="novice-boot-box-wrap" style="position: relative" v-if="!getNoviceKeyStatus.webchatBatchTransfer">
            <div class="novice-circle-group " style="position: absolute;top: 3px;right: -23px">
              <div class="novice-circle4"></div>
              <div class="novice-circle3"></div>
              <div class="novice-circle2"></div>
              <div class="novice-circle1"></div>
            </div>
            <div style="position: absolute;top: -90px;left:0 ;padding-bottom: 10px;z-index: 100;">
              <novice-boot
                NoviceKey="webchatBatchTransfer"
                :NoviceArr="[{title: '', text: $t('webchat.batchTransferHelp')}]"
                @updateGuidanceSuccess="updateGuidanceSuccess"
              ></novice-boot>
            </div>
          </div>
        </template>
      </card-batch>
    </div>
    <end-session-box v-if="batchFinish.dialogTableVisible" :info="batchFinish" :deleteFlag="deleteFlag" @endSession="endSessionFun"></end-session-box>
  </div>
</template>
<script type="text/javascript">
  import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import WebchatTimer from '@/components/business-modules/webchat/WebchatTimers'
  import { timeFormat, deepClone, getCache, getCacheByKey, getFormatDateTime, innerHtmlChannelColor, contains, htmlToText, filterXSS, isHasFunc, updateOptions } from '@/utils/m7Utils.js'
  import { statusCustColorArr } from '@/utils/reportUtils'
  import CardBatch from '@/components/public-modules/card/CardBatch'
  import EndSessionBox from './WebchatEndSession'
  import NoRecord from '@/components/public-modules/card/NoRecord'
  import { renderEmoji } from '@/utils/webchat.js'
  import * as types from '@/store/modules/webchat/mutation-types.js'
  import noviceBoot from '@/components/public-modules/novice-boot/index.vue'
  import webchatCardSlotFilter from './base/webchatCardSlotFilter'
  import webchatTransfer from './webchatTransferBatch'
  import webchatQueueTime from './base/WebchatQueueTimer.vue'
  export default {
    name: 'WebchatCard',
    props: {
      tabType: {
        type: String,
        default: 'webchat_todo'
      },
      cardList: Array,
      type: String,
      clearChecked: Number,
      searchStatus: String,
      qu: Object
    },
    watch: {
      // clearChecked 变化 再次执行
      clearChecked: 'checkNone',
      // cardList 变化 再次执行
      cardList () {
        console.log('cardList Change')
        this.checkNone()
      },
      searchStatus: 'changeSearchStatus'
    },
    components: {
      CustomerAvatar,
      WebchatTimer,
      CardBatch,
      NoRecord,
      EndSessionBox,
      webchatCardSlotFilter,
      noviceBoot,
      webchatTransfer,
      webchatQueueTime
    },
    data () {
      return {
        multiChannel: [], // 平台名称
        invitedUser: {},
        deleteFlag: false,
        isUploadFinish: false,
        loading: true,
        checked: false,
        active: true, // 是否使用路由
        colors: statusCustColorArr, // 匹配客户的颜色值
        batch: {
          webchat_todo: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'webchat.endSession', class: 'icon-tuichu', action: 'getFinishReason'},
              {name: 'webchat.batchTransfer', class: 'icon-zhuanjie1', action: 'batchTransfer', popover: 'batchTransferPopover'}
            ]
          },
          webchat_robot: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: []
          },
          webchat_queue: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: []
          },
          webchat_all: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'public.delete', class: 'icon-shanchu', action: 'deleteTip'}
            ]
          },
          webchat_laterProcess: {
            batchItem: [],
            allChecked: false,
            isBatchShow: false,
            checkedCount: 0,
            operator: [
              {name: 'webchat.batchCancelLaterProcess', class: 'icon-shaohouchuli batchCancelLaterProcess', action: 'handleCancelLaterProcess'}
            ]
          }
        },
        shouFinshUndeal: false,
        batchFinish: {
          dialogTableVisible: false,
          endOptionsUl: []
        },
        getNoviceKeyStatus: {},
        batchWebchat: {
          show: false,
          popoLoading: false,
          onlineAgentsInvite: [],
          openPop: {
            index: -1,
            isOn: false
          },
          AssignTreeData: []
        },
        isShowRobotReceiveSession: true,
        isShowQueueReceiveSession: true,
        EndSessionOptions: [],
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf'
      }
    },
    computed: {
      cardListRender () {
        let cardlist = this.cardList
        console.log('render')
        return cardlist
      },
      sessionId () {
        return this.$store.state.session.sessionId
      },
      allCheckLength () {
        let length = this.cardList.length
        let that = this
        this.cardList.forEach((item) => {
          if (item.invitedUser && item.invitedUser === that.sessionId) {
            length--
          }
        })
        if (length < 0) {
          length = 0
        }
        return length
      },
      count () {
        if (this.$store.state.webchat.webchatList[this.tabType] && this.tabType) {
          return this.$store.state.webchat.webchatList[this.tabType].count || 0
        } else {
          return 0
        }
      },
      navMenuState () {
        return this.$store.state.navMenuState || false
      },
      limitCount () {
        return Number(this.$store.state[this.type].currentUser.imDealCount) || 0
      },
      webchatTodoCardAllList () {
        let cardList = this.$store.state.webchat.webchatList[this.tabType].list || []
        return cardList
      },
      closeSessionList () {
        return this.$store.state.webchat.current[this.tabType].currentSession
      }
    },
    methods: {
      // 引导状态更新
      updateGuidanceSuccess () {
        let guidance = this.$getCache('guidance')
        this.getNoviceKeyStatus = guidance || {'webchatBatchTransfer': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
      },
      // 批量转接
      batchTransfer () {
        this.batchWebchat.onlineAgentsInvite = []
        this.$store.dispatch('getOnlineAgent', {data: {}}).then((res) => {
          if (res.length) {
            this.batchWebchat.onlineAgentsInvite = res
          }
          this.batchWebchat.popoLoading = true
          this.batchWebchat.show = true
          this.batchWebchat.openPop.index = -1
          this.batchWebchat.openPop.isOn = false
          this.batchWebchat.AssignTreeData = deepClone(res)
          this.batchWebchat.popoLoading = false
        })
      },
      searchTree (searchName, data) {
        if (searchName) {
          this.batchWebchat.onlineAgentsInvite = data
        } else {
          this.batchWebchat.onlineAgentsInvite = deepClone(this.batchWebchat.AssignTreeData)
        }
      },
      togglePop (index) {
        if (index === this.batchWebchat.openPop.index) {
          this.batchWebchat.openPop.isOn = !this.batchWebchat.openPop.isOn
        } else {
          this.batchWebchat.openPop.index = index
          this.batchWebchat.openPop.isOn = true
        }
      },
      batchTransferSend (model, type, modelagent) {
        var sessionListData = this.batch[this.tabType].batchItem
        if (sessionListData.length < 1) {
          this.$message.error(this.$t('webchat.batchTransferEmpyt'))
          return
        }
        if (sessionListData.length > 10) {
          sessionListData = sessionListData.splice(0, 10)
        }
        let sendData = {
          sessionList: sessionListData
        }
        if (type === 'transferGroup') { // 转接技能组
          sendData.queueId = model._id
          sendData.toPeer = model.Exten
        } else { // 转接单个坐席
          sendData.toPeer = model.Exten
          sendData.toUserName = modelagent.displayName
          sendData.toUser = modelagent._id
        }
        this.$store.dispatch('batchRedirectWebchatSession', sendData).then((response) => {
          if (response.success) {
            this.checkNone()
            this.batchWebchat.show = false
            let list = this.$store.state.webchat.webchatList.webchat_todo.list
            let flag = false
            let session = window.sessionStorage
            list.forEach(item => {
              if (item._id === this.$route.path.split('/')[4]) {
                flag = true
                return
              }
            })
            if (!flag) {
              let webchatData = {url: '/index/webchat/webchat_todo', flag: false}
              session.setItem('webchat', JSON.stringify(webchatData))
              this.$store.commit('BLANK', 'webchat_todo')
              this.$router.replace({path: '/index/webchat/webchat_todo'})
            }
            if (response.message === 'someRedirectToPeerFail') {
              this.$message.warning(this.$t('webchat.someRedirectToPeerFail'))
            } else if (response.message === 'someRedirectToUserFail') {
              this.$message.warning(this.$t('webchat.someRedirectToUserFail'))
            }
          }
        })
      },
      batchTransferPopFun (e) {
        if (this.$refs.batchTransferPopover && !this.$refs.batchTransferPopover.$el.contains(e.target)) {
          this.batchWebchat.show = false
        }
      },
      // 置顶OR取消置顶
      setSessionTop (item, status) {
        let data = {
          sessionId: item._id,
          status: status,
          sid: item.sid
        }
        this.$store.dispatch('setSessionTop', data).then(resp => {
          if (resp.success) {
            this.$message.success(this.$t('business.operateSuc'))
          }
        })
        // 数据统计
        if (status) {
          window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-在线咨询置顶会话'])
        } else {
          window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-在线咨询取消置顶会话'])
        }
      },
      // 是否展示置顶状态
      showSetTopStatus (item) {
        return item.setTopStatus && item.setTopAgent && item.setTopAgent.indexOf(this.$store.state.session.sessionId) > -1
      },
      // 批量稍后处理
      handleLaterProcess () {
        let ids = []
        this.batch[this.tabType].batchItem.forEach((item) => {
          ids.push(item._id)
        })
        this.$store.dispatch('markLaterProcess', {ids: ids}).then(res => {
          if (res.success) {
            this.$message.success(this.$t('webchat.laterProcessSuccess'))
            this.batch[this.tabType].batchItem.forEach((item) => {
              this.$store.commit(types.UPDATE_LATERPROCESS_STATUS, {_id: item._id, status: true})
            })
            this.checkNone()
          }
        })
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-在线咨询批量稍后处理'])
      },
      // 批量取消稍后处理
      handleCancelLaterProcess () {
        let ids = []
        this.batch[this.tabType].batchItem.forEach((item) => {
          ids.push(item._id)
        })
        this.$store.dispatch('removeLaterProcess', {ids: ids}).then(res => {
          if (res.success) {
            if (this.tabType === 'webchat_laterProcess') {
              this.batch[this.tabType].batchItem.forEach((item) => {
                this.$store.commit(types.UPDATE_LATERPROCESS_STATUS, {_id: item._id, status: false})
              })
              this.checkNone()
              this.$emit('refresh')
              let currentUrl = this.$route.path.split('/')[4]
              if (ids.indexOf(currentUrl) > -1) {
                this.$store.commit('BLANK', 'webchat_laterProcess')
                this.$router.replace({path: '/index/webchat/webchat_laterProcess'})
              }
            }
            if (this.tabType === 'webchat_todo') {
              this.batch[this.tabType].batchItem.forEach((item) => {
                this.$store.commit(types.UPDATE_LATERPROCESS_STATUS, {_id: item._id, status: false})
              })
              this.checkNone()
            }
          }
        })
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-在线批量取消稍后处理'])
      },
      //      快捷关闭方法
      getAutoFinishReason (invitedUser) {
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-卡片结束会话'])
        this.invitedUser = invitedUser
        this.deleteFlag = true
        let self = this
        this.$store.dispatch('getCache', {type: 'channelGlobalSet'}).then((res) => {
          innerHtmlChannelColor(self)
          let fastOff = res.fastOff
          let fastOffName = res.fastOffName
          this.batchFinish.remark = invitedUser.remark || ''
          let data = {
            _id: invitedUser._id,
            sid: invitedUser.sid,
            remark: invitedUser.remark || ''
          }
          let closeSessionData
          if (this.closeSessionList[invitedUser._id] && this.closeSessionList[invitedUser._id].closeSessionList) {
            closeSessionData = this.closeSessionList[invitedUser._id].closeSessionList
          }
          if (closeSessionData && closeSessionData.status === 'close') {
            data.finishReason = closeSessionData.finishReason
            data.finishKey = closeSessionData.finishKey
          } else {
            data.finishReason = fastOffName
            data.finishKey = fastOff
          }
          if (res.fastOff === 'defaultNum' || !res.fastOff) {
            if (this.EndSessionOptions.length === 0) {
              this.$message.error(this.$t('webchat.isNullByFinishKey'))
              return
            }
            if (!closeSessionData || (closeSessionData && closeSessionData.status !== 'close')) {
              this.batchFinish.dialogTableVisible = true
              return
            }
          }
          this.$store.dispatch('finishWebchatSession', data).then(() => {
            let list = this.$store.state.webchat.webchatList.webchat_todo.list
            let flag = true
            let session = window.sessionStorage
            list.forEach((item, index) => {
              if (item._id === this.$route.path.split('/')[4]) {
                flag = false
              }
            })
            if (flag) {
              let callData = {url: '/index/webchat/webchat_todo', flag: false}
              session.setItem('webchat', JSON.stringify(callData))
              this.$store.commit('BLANK', 'webchat_todo')
              this.$router.replace({path: '/index/webchat/webchat_todo'})
            }
          })
        })
      },
      chatTime (item) {
        if (item.chatTime) {
          return item.chatTime
        }
        let shortTime = timeFormat(item.createTime, 'card')
        item.chatTime = shortTime
        return shortTime
      },
      handleSelect (item) {
        let _id = item._id
        let path
        if (_id && this.tabType === 'webchat_todo' && !this.$store.state.webchat.current[this.tabType].chatInfoById[_id]) {
          let dataNew = deepClone(item)
          this.$store.commit(types.SER_CARD_DATA_TO_CONTAINER, dataNew)
        }
        if (this.tabType === 'webchat_todo') {
          path = '/index/' + this.type + '/' + this.tabType + '/' + _id + '/webchat?flag=list'   //  点击在线咨询能够定位到上一次点击的位置
        } else {
          path = '/index/' + this.type + '/' + this.tabType + '/' + _id
        }
        this.$router.push({path: path})
      },
      getChecked () { // 单选获取数组
        let that = this
        let arr = []
        this.cardList.filter(item => item.checked).map((item) => {
          if (!(item.invitedUser && item.invitedUser === that.sessionId)) {
            arr.push({_id: item._id, sid: item.sid, toPeerBefore: item.toPeer})
          }
        })
        return arr
      },
      changeSearchStatus () { // 改变高级搜索选中搜索的状态
        if (contains(this.$store.state.session.user.funcIds, 'func_finish_undeal_session')) {
          this.shouFinshUndeal = true
        }
        if (this.searchStatus === 'undeal' && this.tabType === 'webchat_all') {
          this.batch.webchat_all.operator = [
            {name: 'webchat.endSession', class: 'icon-tuichu', action: 'getFinishReason'}
          ]
        } else {
          this.batch.webchat_all.operator = [
            {name: 'public.delete', class: 'icon-shanchu', action: 'deleteTip'}
          ]
        }
      },
      checkThis (checked, event) { // 单个选中传送数组和展示批量
        this.changeSearchStatus()
        let checkedArr = this.getChecked()
        let isBatchShow = checkedArr.length > 0
        this.batch[this.tabType].allChecked = checkedArr.length === this.allCheckLength
        this.batch[this.tabType].batchItem = checkedArr
        this.batch[this.tabType].isBatchShow = isBatchShow
        this.batch[this.tabType].checkedCount = checkedArr.length
        if (this.batchWebchat.show && checkedArr.length < 1) {
          this.batchWebchat.show = false
        }
      },
      checkAll () { // 全选&取消全选
        this.batch[this.tabType].isBatchShow = this.batch[this.tabType].allChecked
        let inputs = this.$el.getElementsByClassName('fbox')
        this.cardList.forEach((item) => {
          item.checked = this.batch[this.tabType].allChecked
        })
        for (let i = 0; i < inputs.length; i++) { // 升级之后有bug需要手动将checkbox调整为相应状态
          inputs[i].checked = this.batch[this.tabType].allChecked
        }
        this.batch[this.tabType].batchItem = this.getChecked()
        if (this.$store.state.webchat.webchatList[this.tabType].more) {
          if (this.batch[this.tabType].allChecked) {
            if (this.tabType === 'webchat_todo' || this.tabType === 'webchat_laterProcess') {
              this.batch[this.tabType].checkedCount = this.allCheckLength
            } else {
              this.batch[this.tabType].checkedCount = this.count
            }
          } else {
            this.batch[this.tabType].allChecked = 0
          }
        } else {
          if (this.batch[this.tabType].allChecked) {
            if (this.tabType === 'webchat_todo' || this.tabType === 'webchat_laterProcess') {
              this.batch[this.tabType].checkedCount = this.allCheckLength
            } else {
              this.batch[this.tabType].checkedCount = this.count
            }
          } else {
            this.batch[this.tabType].allChecked = 0
          }
        }
      },
      checkNone () {
        this.batch[this.tabType].allChecked = false
        this.batch[this.tabType].batchItem = []
        this.batch[this.tabType].isBatchShow = false
        this.cardList.forEach((item) => {
          item.checked = false
        })
      },
      getFinishReason () {
        if (this.EndSessionOptions.length === 0) {
          this.$message.error(this.$t('webchat.isNullByFinishKey'))
          return
        }
        if (this.searchStatus === 'undeal' && this.tabType === 'webchat_all' && this.batch[this.tabType].allChecked && this.count >= 1000) {
          this.$message.error(this.$t('webchat.undealLimit'))
          return
        }
        this.batchFinish.dialogTableVisible = true
        this.deleteFlag = false
      },
      endSessionFun (flag, option, remark, deleteFlag) {
        if (flag) {
          if (!option || option === '') {
            this.$message.error(this.$t('public.chooseEndSession'))
            return
          } else {
            let actName = option.split('__')[1]
            let finishKey = option.split('__')[0]
            let data
            let newBatchItem = deepClone(this.batch[this.tabType].batchItem)
            let batchItemArr = []
            newBatchItem.forEach(item => {
              batchItemArr.push({_id: item._id, sid: item.sid})
            })
            if (this.tabType === 'webchat_todo') {
              if (deleteFlag && this.invitedUser._id) {
                data = {
                  _id: this.invitedUser._id,
                  sid: this.invitedUser.sid,
                  finishReason: actName,
                  finishKey: finishKey,
                  remark: remark || ''
                }
              } else {
                data = {
                  finishiArr: batchItemArr,
                  finishReason: actName,
                  finishKey: finishKey,
                  remark: ''
                }
              }
              this.$store.dispatch('finishWebchatSession', data).then(() => {
                this.deleteFlag = false
                let list = this.$store.state.webchat.webchatList.webchat_todo.list
                let flag = true
                let session = window.sessionStorage
                list.forEach(item => {
                  if (item._id === this.$route.path.split('/')[4]) {
                    flag = false
                  }
                })
                if (flag) {
                  let webchatData = {url: '/index/webchat/webchat_todo', flag: false}
                  session.setItem('webchat', JSON.stringify(webchatData))
                  this.$store.commit('BLANK', 'webchat_todo')
                  this.$router.replace({path: '/index/webchat/webchat_todo'})
                }
              })
            } else if (this.tabType === 'webchat_all') {
              if (this.batch[this.tabType].allChecked) {
                data = deepClone(this.qu)
                data.finishReason = actName
                data.finishKey = finishKey
                data.remark = ''
                delete data.limit
                delete data.submenu
                delete data.page
              } else {
                data = {
                  finishiArr: batchItemArr,
                  finishReason: actName,
                  finishKey: finishKey,
                  remark: ''
                }
              }
              this.$store.dispatch('finishUndealWebchatSession', data).then((res) => {
                if (res && res.success) {
                  this.deleteFlag = false
                  this.$emit('refresh')
                  this.$store.commit('BLANK', 'webchat_all')
                  this.$router.replace({path: '/index/webchat/webchat_all'})
                }
              })
            }
            this.batchFinish.dialogTableVisible = false
            this.checkNone()
          }
        } else {
          this.batchFinish.dialogTableVisible = false
        }
      },
      leaveTime (val) { // 访客离开时间
        if (val) {
          return timeFormat(getFormatDateTime(new Date(val)))
        } else {
          return ''
        }
      },
      lastMessageChange (wxObj) {
        let flag = true
        let value = ''
        if (wxObj.lastMessage && wxObj.lastMessage.contentType) {
          if (wxObj.lastMessage.contentType === 'text') {
            wxObj.lastMessage.content = filterXSS(wxObj.lastMessage.content)
            try {
              value = decodeURIComponent(wxObj.lastMessage.content)
            } catch (e) {
              value = wxObj.lastMessage.content
            }
          }
          if (wxObj.lastMessage.contentType === 'file') {
            value = this.$t('webchat.messageFile')
          }
          if (wxObj.lastMessage.contentType === 'image') {
            value = this.$t('webchat.messageImg')
          }
          if (wxObj.lastMessage.contentType === 'voice') {
            value = this.$t('webchat.messageVoice')
          }
          if (wxObj.lastMessage.contentType === 'imcsr' || wxObj.lastMessage.contentType === 'saveImCSRInfo') {
            value = this.$t('webchat.messageEvaluation')
          }
          if (wxObj.lastMessage.contentType === 'iframe') {
            value = this.$t('webchat.messageIframe')
          }
          if (wxObj.lastMessage.contentType === 'wechatvideo') {
            value = this.$t('webchat.messageWechatVoice')
          }
          if (wxObj.lastMessage.contentType === 'link') {
            value = this.$t('webchat.messageWechatLink')
          }
          if (wxObj.lastMessage.contentType === 'newCardInfo') {
            value = this.$t('webchat.cardInfoMessage')
          }
        } else if (wxObj.lastMessage && !wxObj.lastMessage.contentType) {
          if (wxObj.contentType === 'text') {
            wxObj.lastMessage = filterXSS(wxObj.lastMessage)
            if (wxObj.leavemsg) {
              value = this.$t('webchat.messageLeaveMsg')
            } else {
              value = wxObj.lastMessage
            }
          }
          if (wxObj.contentType === 'file') {
            value = this.$t('webchat.messageFile')
          }
          if (wxObj.contentType === 'image') {
            value = this.$t('webchat.messageImg')
          }
          if (wxObj.contentType === 'voice') {
            value = this.$t('webchat.messageVoice')
          }
          if (wxObj.contentType === 'imcsr' || wxObj.contentType === 'saveImCSRInfo') {
            value = this.$t('webchat.messageEvaluation')
          }
          if (wxObj.contentType === 'iframe') {
            value = this.$t('webchat.messageIframe')
          }
          if (wxObj.contentType === 'wechatvideo') {
            value = this.$t('webchat.messageWechatVoice')
          }
          if (wxObj.contentType === 'link') {
            value = this.$t('webchat.messageWechatLink')
          }
        } else {
          if (wxObj.leavemsg) {
            value = this.$t('webchat.messageLeaveMsg')
          } else {
            value = ''
          }
//          value为空的时候代表是新会话接入的时候
        }
        let renderVal = renderEmoji(value, flag)
        if (wxObj.lastMessage && wxObj.lastMessage.type === 'out') {
          renderVal = this.$t('webchat.fromAgent') + '：' + renderVal
        } else if (wxObj.lastMessage && wxObj.lastMessage.type === 'in') {
          renderVal = this.$t('webchat.fromCustomer') + '：' + renderVal
        } else if (wxObj.lastMessage && wxObj.lastMessageFrom) {
          if (wxObj.lastMessageFrom === 'customer') {
            renderVal = this.$t('webchat.fromCustomer') + '：' + renderVal
          }
          if (wxObj.lastMessageFrom === 'agent') {
            renderVal = this.$t('webchat.fromAgent') + '：' + renderVal
          }
          if (wxObj.lastMessageFrom === 'robot') {
            renderVal = this.$t('webchat.fromRobot') + '：' + htmlToText(renderVal)
          }
          if (wxObj.lastMessageFrom === 'system') {
            renderVal = this.$t('webchat.fromSystem') + '：' + renderVal
          }
        }
        return renderVal
      },
      toPeer (data) {
        let peerId = data.toPeer || data.ToPeer
        let peer = getCacheByKey('mailQueues', 'Exten', peerId)
        let peerName = ''
        if (peer) {
          peerName = peer.DisplayName
        }
        return peerName
      },
      agentName (data) {
        let agent = getCache('agents', data.user)
        let agentDisplayName = ''
        if (agent && agent.displayName) {
          agentDisplayName = agent.displayName
        }
        return agentDisplayName
      },
      platformContent (item) {
        let content = ''
        let accessItem = null
        if (item.platform === 'pc') {
          content += this.$t('webchat.websiteConShot')
        } else if (item.platform === 'weixin') {
          content += this.$t('webchat.weChatConShot')
        } else if (item.platform === 'wxmini') {
          content += this.$t('webchat.weChatMiniShot')
          if (item.sourceName) {
            content += item.sourceName
          }
        } else if (item.platform === 'sdk') {
          content += this.$t('webchat.appConShot')
        } else if (item.platform === 'wap') {
          content += this.$t('webchat.wapConShot')
        } else if (item.platform === 'weibo') {
          content += this.$t('webchat.weBoConShot')
        } else if (item.platform === 'wxwork') {
          content += this.$t('webchat.enterpriseShot')
        } else if (item.platform === 'ocpc') {
          content += this.$t('webchat.baiduBCP')
        } else if (item.platform === 'dy') {
          content += this.$t('webchat.TikTok')
        } else if (item.platform === 'wxkf') {
          content += this.$t('webchat.platformWXKF')
        }
        if (this.multiChannel && this.multiChannel instanceof Array) {
          this.multiChannel.forEach((i) => {
            if (item.accessId === i.accessId) {
              accessItem = i
            }
          })
          if (accessItem && accessItem.name) {
            content += ' | ' + accessItem.name
          }
          return content
        } else {
          this.$store.dispatch('getCache', {type: 'webchatAndSdkConfig'}).then((res) => {
            if (res && res instanceof Array) {
              this.multiChannel = res
            } else {
              this.multiChannel = []
            }
            this.multiChannel.forEach((i) => {
              if (item.accessId === i.accessId) {
                accessItem = i
              }
            })
            if (accessItem && accessItem.name) {
              content += ' | ' + accessItem.name
            }
            return content
          })
        }
      },
      claimRobotSession (item) { // 领取机器人会话
        // if (this.$store.state.webchat.isOn === 'open') {
          this.$store.dispatch('robotclaimSession', {_id: item._id, sid: item.sid || ''}).then((res) => {
            if (res && res.success) {
              this.$emit('refresh', 'isClaim')
              this.$store.commit('BLANK', 'webchat_robot')
              this.$router.replace({path: '/index/webchat/webchat_robot'})
            } else {
              this.$emit('refresh', 'isClaim')
            }
          })
        // } else {
          // this.$message.error(this.$t('message.agent_close_auto_claim'))
        // }
      },
      claimQueueSession (item) { // 领取排队会话
        this.$store.dispatch('queueclaimSession', {sessionId: item._id, sid: item.sid || ''}).then((res) => {
          if (res && res.success) {
            this.$emit('refresh', 'isClaim')
            this.$store.commit('BLANK', 'webchat_queue')
            this.$router.replace({path: '/index/webchat/webchat_queue'})
          } else {
            this.$emit('refresh', 'isClaim')
            this.$message.error('领取失败，当前会话已被其他坐席领取')
          }
        })
      },
      statusName (status) { //
        let custTmpls = this.$getCache('custTmpls')
        if (status && custTmpls[0]) {
          let cs = custTmpls[0].status[status]
          if (cs) {
            return cs
          } else {
            return status !== 'status_unknow' ? this.$t('public.unknownCustomer') : this.$t('public.unknownCustomer')
          }
        } else {
          return this.$t('public.unknownCustomer')
        }
      },
      currentColor (status) {
        let statusConfig
        let custTmpls = this.$getCache('custTmpls')
        if (custTmpls[0]) {
          statusConfig = custTmpls[0].statusConfig
        }
        if (status) {
          if (statusConfig && statusConfig[status]) {
            return statusConfig[status].color
          } else {
            return this.colors[status] ? this.colors[status] : '#009FE3'
          }
        }
      },
      showGrabBtn (toPeer, user, status, inviteUserStatus) {
        // 全部中展示浏览信息
        let isContainPeer = false
        let showGrabIcon = false
        let accessChannelAgent = this.$getCache('custTmpls')
        let peer = accessChannelAgent.filter(obj => obj._id === toPeer)[0]
        if (peer && peer.agents && peer.agents.length) {
          let accessAgents = []
          accessAgents = peer.agents
          accessAgents.forEach((item) => {
            if (item.agentID === this.$store.state.session.user._id) {
              isContainPeer = true
            }
          })
        }
        if (!isContainPeer) {
          showGrabIcon = false
        } else if (this.$store.state.session.user._id === user) {
          showGrabIcon = false
        } else if (status !== 'deal') {
          showGrabIcon = false
        } else if (!contains(this.$store.state.session.user.funcIds, 'func_webchat_grab')) {
          showGrabIcon = false
        } else if (inviteUserStatus === 'accept') {
          showGrabIcon = false
        } else {
          showGrabIcon = true
        }
        return showGrabIcon
      },
      grabConversation (_id, sid, user) {
        let data = {
          _id: _id,
          toUser: this.$store.state.session.user._id,
          toUserName: this.$store.state.session.user.displayName,
          sid: sid,
          'currUser': user
        }
        let self = this
        this.$store.dispatch('grabWebchatSession', data).then(() => {
          self.$router.push('/index/webchat/webchat_todo/' + _id + '/webchat')
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'accessChannelAgent'})
      this.$store.dispatch('getCache', {type: 'webchatAndSdkConfig'}).then((res) => {
        if (res) {
          this.multiChannel = res
        }
      })
      if (this.flag !== 'ecommerce') {
        this.batch.webchat_todo.operator = [
          {name: 'webchat.endSession', class: 'icon-tuichu', action: 'getFinishReason'},
          {name: 'webchat.batchLaterProcess', class: 'icon-shaohouchuli1', action: 'handleLaterProcess'},
          {name: 'webchat.batchCancelLaterProcess', class: 'icon-shaohouchuli batchCancelLaterProcess', action: 'handleCancelLaterProcess'},
          {name: 'webchat.batchTransfer', class: 'icon-zhuanjie1', action: 'batchTransfer', popover: 'batchTransferPopover'}
        ]
      }
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
        let _dics = ''
        for (let i = 0; i < res.length; i++) {
          if (res[i].type === 'webchat') {
            _dics = res[i].options || []
            break
          }
        }
        updateOptions(_dics, {Arr: this.EndSessionOptions})
        this.batchFinish.endOptionsUl = this.EndSessionOptions
      })
      if (this.$store.state.session.user.funcIds && contains(this.$store.state.session.user.funcIds, 'func_finish_undeal_session')) {
        this.shouFinshUndeal = true
      }
      if (isHasFunc('func_not_allow_receive_robot_session', this.$store.state.session.user)) {
        this.isShowRobotReceiveSession = false
      }
      if (!isHasFunc('func_active_claim_queue_session', this.$store.state.session.user)) {
        this.isShowQueueReceiveSession = false
      }
      if (isHasFunc('func_not_tranfer_webchatSession', this.$store.state.session.user)) {
        this.batch.webchat_todo.operator = [
          {name: 'webchat.endSession', class: 'icon-tuichu', action: 'getFinishReason'},
          {name: 'webchat.batchLaterProcess', class: 'icon-shaohouchuli1', action: 'handleLaterProcess'},
          {name: 'webchat.batchCancelLaterProcess', class: 'icon-shaohouchuli batchCancelLaterProcess', action: 'handleCancelLaterProcess'}
        ]
      }
      document.addEventListener('click', this.batchTransferPopFun)
      // 获取最新呼吸灯是否展示
      this.updateGuidanceSuccess()
    },
    beforeDestroy () {
      document.removeEventListener('click', this.batchTransferPopFun)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .limitCountNotice
    height 40px
    background-color #FDF6EC
    color #E6A23C
    text-align center
    font-size 14px
    line-height 40px
  .rehidden
    visibility visible
  .rehiddenBlock
    display block
  .webchat-card
    .custom-is-active
      background-color #e5f1ff
  .el-menu-item
    height auto
    line-height inherit
    padding 0
  .el-menu-item.custom-is-active
    background-color $c-card-active
  .el-menu-item.custom-is-active
    .card
      background-color $c-card-active
  .isOffline
    .info_li_sname
      color #424242
      font-weight bold
  .card:hover
  .card:active
    background-color $c-card-hover
    label
      display: block
    .rehidden
      visibility:hidden
    .rehiddenBlock
      display none
    .offlineShow
      display block
      font-size: 12px
      color: #666
    .activeShaohouchuli
      display none
  .card
    padding 0 10px 0 25px
    box-sizing border-box
    width 100%
    height 76px
    border-bottom 1px solid $c-border1
    background-color $cf-white
    display flex
    cursor pointer
    .activeShaohouchuli
      color $c-main
    .el-checkbox
      visibility hidden
    .e-ch-show
      visibility visible
    .ct
      display inline-block
      box-sizing border-box
      margin-right 14px
      padding-top 10px
    .info
      flex 8
      display flex
      align-items center
      width: calc(100% - 16px)
      ul
        height: 100%
        padding: 9px 0 10px 0
        flex-grow: 1
        overflow: hidden
        box-sizing: border-box
        li
          color $cf-gray0
          overflow: hidden
        .card_chat_content
          height 21px
          line-height: 21px
          display: flex
          justify-content: space-between
        .agents_and_skill_group
          justify-content: space-between
          line-height: 20px;
          height: 21px;
          width 100%
      .new_chat.font14
        font-weight 500
        justify-content: space-between
      .new_chat
        position relative
        overflow: hidden
        line-height: 17px
        height: 17px
        display: flex
        .Cover
          position absolute
          display inline-block
          width 100%
          height 100%
          z-index 2
    .remark
      flex 4
      ul
        float right
        margin-right 8px
        .el-icon-star-on
          color #f2cc47
        .chat_status_li
          margin-top 7px
        .chat_status_btn
          margin-top 3px
          .chat_btn
            padding 3px 6px
        .chat_status
          float right
          margin-left 6px
    .date
      color $cf-gray6
      text-align right
      float right
      font-weight: normal
    .hoverIcon
      z-index 100
      display none
      cursor pointer
      label
        display inline-block
        cursor pointer
        vertical-align text-top
    .el-icon-close
      margin 0
      width: 16px
      color $c-pink
      line-height: 16px
      height: 16px
      font-size 16px
    .icon-zhiding
      font-size 16px
      color $c-main
    .icon-ding
      font-size 16px
      color $c-pink
    .hoverIcon .close
      margin-left 7px
      color $c-pink
  .card:hover .hoverIcon
    display block
  .card.all
    height 76px
  .card.setTop
    background #FFFBE6
  .card_statu_li
    display inline-block
    color #ff9100
    text-align center
    border-radius 4px
  .status_finish
    color #666
    font-weight 700
  .status_change
    color #459ae9
    font-weight 700
  .status_deal,.status_invited_get
    color #41b27f
    font-weight 700
  .status_robot
    color $cf-gray4
    font-weight 700
  .status_beinvited
    color $c-prompt
  .status_undeal
    color #ff8403
    font-weight 700
  .card_chat_content
    max-height 2.2em
  .chat_content
    color $cf-gray2
    flex-shrink 1
  .info_li_sname
    color $cf-gray1
    font-weight bold
    display block
  .offlineShow
    display none
  .videoIcon
    color $cf-gray6 !important
    line-height: 13px
    font-size: 14px
  .agent_wait_time
    display: flex;
    justify-content: space-between;
    height: 17px
    line-height: 22px
  .custintent
    margin: 0 5px
    position: relative
    height: 16px
    line-height: 16px
    font-size: 14px
    font-weight: bold
    color: $c-main
  .cust_status_box
    line-height 18px
    float: right
    .iconfont
      color: #479de8;
      margin-right: 4px;
      display: inline-block;
      vertical-align: top;
  .cust_status
    color: $cf-gray5
  .webchat_card_status
    position: absolute
    z-index: 9
    top: 30px
    left: 5px
    line-height: 18px
    .iconfont
      display: block;
      margin-bottom: 7px;
      color: #479de8;
      padding: 0;
      height: 14px;
      overflow: hidden;
      line-height: 14px;
  .robot_btn
    width 36px
    padding: 0;
    font-size: 10px;
    padding: 2px 0;
    color $c-main
    border 1px solid $c-main
    background-color: transparent
    margin-top: 1px
  .webchat_all_lixian
    position: absolute
    z-index: 9
    top: 8px
    left: 5px
    line-height: 18px
  .platformContent
    text-overflow: ellipsis
    overflow: hidden
    color: $cf-gray4
    white-space: nowrap
  .im_pc:before
    content "\e713"
  .im_weixin:before
    content "\e715"
  .im_wxmini:before
    content "\e716"
  .im_wap:before
    content "\e714"
  .im_sdk:before
    content "\e671"
  .im_weibo:before
    content "\e6d1"
  .im_wxwork:before
    content "\e747"
  .im_ocpc:before
    content "\e761"
  .im_dy:before
    content "\e8db"
  .im_wxkf:before
    content "\e754"
  [class^='im_']
    font-family "iconfont" !important
    font-style normal
    -webkit-font-smoothing antialiased
    color $cf-color1 !important
  .onlineStatus
    color #fff
    background #41b27f
    border-radius: 1px
    height: 12px
    font-size: 12px
    line-height: 12px
    float: left
    margin: 1px 5px 0 0
    padding: 1px
  .offlineStatus
    color #fff
    background $cf-level1
    border-radius: 1px
    height: 12px
    font-size: 12px
    line-height: 12px
    float: left
    margin: 1px 5px 0 0
    padding: 1px
  .webchat_card
    .fake-checkbox
      top 11px
  .option
    display flex
</style>
